<template>
    <div class="export-list">
        <div class="export-top">
         <div class="export-tabs">
            <p @click="handleClick(1)">新建导出</p>
            <p @click="handleClick(2)">历史导出</p>
        </div>
        <div class="export-subset" v-if="tabIndex==1" v-loading="loading1" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading">
            <div class="subset-list">
                <el-row>
                    <el-col :span="24" class="subset-title">
                        <el-col :span="1" class="min-h"></el-col>
                        <el-col :span="6"><span>数据集名称</span></el-col>
                        <el-col :span="6">所属数据集</el-col>
                        <el-col :span="5">创建时间</el-col>
                        <el-col :span="2" class="min-h"></el-col>
                    </el-col>
                    <el-col :span="24" class="subset-main" v-for="(item,index) in subDataList" :key="index">
                        <!-- <div class="subset-cont" @click="radioChangeAll(item)"> -->
                        <div class="subset-cont" :class="index==Indexs?'activeBg':''">
                            <el-col :span="1" class="Radios"><el-radio v-model="subsetRadio" :label="item.sub_set_id" :key="item.sub_set_id" @change='radioChange(index)'><span v-show="1>2">12312</span></el-radio></el-col>
                            <el-col :span="6">{{item.sub_set_name}}</el-col>
                            <el-col :span="6">{{item.data_set_name}}</el-col>
                            <el-col :span="5">{{item.create_time}}</el-col>
                            <el-col :span="3" class="exportName" v-if="index==Indexs"><input type="text" v-model.trim="exportName" placeholder="请输入导出文件名"></el-col>
                            <el-col :span="2" v-if="index==Indexs"><el-button type="primary" size="mini" @click="exportClick">导出</el-button></el-col>
                        </div>
                        <div class="subset-layer" :class="index==Indexs?'subset-layer-auto':''">
                            <div class="subset-layer-list"> 
                                <el-checkbox-group v-model="checkList" >
                                    <el-checkbox v-for="items in item.SubsetLayer" :key="items.item_id" :label="items.item_id">{{items.item_name}}</el-checkbox>
                                </el-checkbox-group>
                            </div>
                        </div>
                    </el-col>
                </el-row>
            </div>
        </div> 
        <div class="export-subset exportState" v-if="tabIndex==2" v-loading="loading2" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading">
              <div class="subset-list">
                <el-row>
                    <el-col :span="24" class="subset-title">
                        <el-col :span="4">数据集名称</el-col>
                        <el-col :span="6">导出时间</el-col>
                        <el-col :span="8">导出地址</el-col>
                        <el-col :span="6">导出进度</el-col>
                    </el-col>
                    <el-col :span="24" class="subset-main" v-for="(item,index) in exportSpeedData" :key="index">
                        <div class="subset-cont">
                            <el-col :span="4">{{item.sub_set_name}}</el-col>
                            <el-col :span="6"><span class="pull-block">开始时间：{{item.create_time}}</span><span class="pull-block">结束时间：{{item.update_time}}</span></el-col>
                            <el-col :span="8">{{item.file_path}}</el-col>
                            <el-col :span="6">
                                <div class="progress-container">
                                    <div class="progress-box">
                                        <div class="progress-bar" :style="'width:'+item.export_progress+'%'"></div>
                                        <div class="progress-barInfo" style="width:100%"></div>
                                    </div>
                                    <div class="progressbar-text">{{item.export_progress}}%</div>
                                </div>
                            </el-col>
                        </div>
                    </el-col>
                </el-row>
            </div>
        </div>
        </div>
        <div class="demonstration export-bottom">
            <el-pagination
                class="demonstration-page"
                background
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page.sync="subSetPagination.page_index"
                :page-size="subSetPagination.page_size"
                layout="total, prev, pager, next, jumper"
                :total="subSetPagination.total">
            </el-pagination>
            <el-button type="primary" size="mini" class="demonstration-btn" v-if="tabIndex==2" @click="RefreshSpeed">刷新进度</el-button>
        </div>
    </div>
</template>

<script>
import SubDataSetService from '../../services/SubDataSetService.js'
import exportShape from '../../services/TaskMangeService.js'
export default {
    data(){
        return{
          subSetService: new SubDataSetService,
          exportShapes: new exportShape,
          subSetPagination: {
            page_size:10,
            page_index: 1,
            page_count:1,
            total:10
          },
          tabIndex:1,
          subsetRadio:'',
          Indexs:-1,
          SpeedsState:false,
          exportName:'',
          subDataList:[],
          checkList:[],
          dialogData:[],
          exportSpeedData:[],
          loading1:false,
          loading2:false
        }
    },
    methods:{
      //获取子集列表
     async subsetList(){
        var userData=localStorage.getItem("zhdq_gismanage_dataset")
        var user = JSON.parse(userData);
        let parmes={
            data_set_id:user.data_set_id,
            page_index:this.subSetPagination.page_index?this.subSetPagination.page_index:1,
            page_size:this.subSetPagination.page_size?this.subSetPagination.page_size:10
        }
        this.loading1=true;
        let res = await this.subSetService.getList( parmes );
        if ( res.code == 200 ) {
            this.subDataList = res.data.list;
            this.subSetPagination = res.data.pagination;
            this.subDataList.map((ele,i)=>{
            this.$set(ele, "SubsetLayer",this.$getWords(104)); 
           })
           this.loading1=false;
        } else {
            this.loading1=false;
            this.subDataList = [];
        }
      },
      //分页
      handleSizeChange(val) {
        this.subSetPagination.page_size=val;
        if(this.tabIndex==1){
            this.subsetList();
        }
        if(this.tabIndex==2){
            this.exportSpeeds();
        }
      },
      handleCurrentChange(val) {
        this.subSetPagination.page_index=val;
        if(this.tabIndex==1){
            this.subsetList();
        }
        if(this.tabIndex==2){
            this.exportSpeeds();
        }
      },
    
      //导出状态切换
      handleClick(index){
        if(index!=this.tabIndex){
            this.subSetPagination.page_index=1;
            this.subSetPagination.page_size=10;
        }
        if(index==1){
            this.subsetList();
        }
        if(index==2){
            this.exportSpeeds();
        }
        this.tabIndex=index;
      },
      radioChange(index){
          this.Indexs=index;
          this.checkList=[];
          this.exportName='';
      },
      async exportClick(){
          let parmes={
            sub_set_id:this.subsetRadio,
            layer_codes: this.checkList,
            file_name: this.exportName
          }
         if(this.exportName!=''){
            let rest= await this.exportShapes.export_shape( parmes );
            if(rest.code==200){
                this.$message({
                message: rest.msg,
                type: 'success',
                duration:1500
                });
            }else{
                this.$message.error(rest.msg);  
            }
         }else{
            this.$message({
            message: '请输入导出文件名',
            type: 'warning',
            duration:1000
            });
         }
       
      },

    //查看导出状态
      async exportSpeeds(){
        let parmes={
            page_index:this.subSetPagination.page_index?this.subSetPagination.page_index:1,
            page_size:this.subSetPagination.page_size?this.subSetPagination.page_size:10
        }
        this.loading2=true;
        let res = await this.exportShapes.export_speed( parmes );
        if ( res.code == 200 ) {
            this.exportSpeedData = res.data.export_list;
            this.subSetPagination = res.data.pagination;
            this.loading2=false;
        } else {
            this.loading2=false;
            this.exportSpeedData = [];
        }
       },
       RefreshSpeed(){
           this.exportSpeeds();
       },
    },
    mounted() {
        this.subsetList()
    },
}
</script>
<style lang="scss">
.subset-layer-list{
   .el-checkbox+.el-checkbox{margin-left: 0px;} 
   .el-checkbox{min-width: 130px;margin-bottom: 7px;}
}
.subset-cont{
   .el-radio__inner{
    width: 16px;
    height: 16px;
   }
   .el-radio__inner::after{
       width: 5px;
       height: 5px;
   }
}
</style>

<style lang="scss" scoped>
    .export-list{
        width: 1330px;
        overflow: hidden;
        margin: auto;
        .export-tabs{
            width: 120px;
            float: left;
            background: #fff;
            text-align: center;
            p{
              padding: 10px 10px;
              box-sizing: border-box;
              cursor: pointer;
              &:hover{
                background-color: #f5f7fa;
                box-shadow: 0px 2px 9px 0px rgba(0, 0, 0, 0.06); 
              }
            }
            p+p{
              border-top: 1px solid #ebebeb;
            }
        }
        .exportState{
          .pull-block{
              line-height: 2;
              height: 20px; 
          }  
        }
        .export-top{
          width: 100%;
          height: 100%;
          overflow: hidden;
        }
        .demonstration{
            margin-top: -3px;
            margin-left: 130px;
            padding-bottom: 20px;
            padding-left: 30px;
            background: #fff;
            overflow: hidden;
            .demonstration-page{float: left;}
            .demonstration-btn{float:right;margin-right: 20px;}
        }
        .progress-container {
            display:table;
            position:relative;
        }
        .progress-container .progress-box,.progress-container .progressbar-text {
            display:table-cell;
            vertical-align:middle;
        }
        .progress-container .progress-box {
            width:88.5%;
            height:5px;
            position:relative;
        }
        .progress-container .progress-box .progress-bar {
            height:inherit;
            background-color:#0078ff;
            position: relative;
            z-index: 99;
        }
        .progress-container .progress-box .progress-barInfo{
            height:inherit;
            background-color:#E5E9F2;
            position: absolute;
            top: 50%;
            margin-top: -3px;
            z-index: 20;
        }
        .progress-container .progress-box .progress-bar,.progress-container .progress-box .progress-bar:after {
            -webkit-border-radius:50%;
            -moz-border-radius:999rem;
            border-radius:999rem;
        }
        .progress-container .progressbar-text {
            color:#475669;
            padding-left:10px;
        }
    }
    .export-subset{
        width: 1200px;
        height:100%;
        margin: auto;
        padding:30px;
        box-sizing: border-box;
        background-color: #fff;
        float: right;
        .subset-list{
            .subset-title{
                line-height: 24px;
                border-bottom: 1px solid #ebebeb;
                padding-bottom: 5px;
                font-weight: bold;
            }
            .subset-main{
                border-bottom: 1px solid #ebebeb;
                overflow: hidden;
                .subset-cont{
                  width: 100%;
                  height: 100%;
                  line-height: 45px;
                  overflow: hidden;
                  .Radios {text-align: center;}
                  .exportName{
                    margin-left: 23px;
                    margin-right: 23px;
                    input{
                        width: 140px;
                        height: 30px;
                        border-radius: 4px;
                        border: 1px solid #dcdfe6;
                        text-indent: 10px;
                        line-height: 30px;
                    }
                  }
                }
                .subset-layer{
                    display:none;
                    padding-top: 20px;
                    padding-bottom: 15px;
                    border-top: 1px solid #ebebeb;
                    .subset-layer-list{
                        margin-left: 50px;
                        margin-right: 50px;
                    }
                }
                .subset-layer-auto{display:block;}
            }
        }
    }
    .min-h{height:24px;}
    .activeBg{background-color: #f5f7fa;}
    .pull-block{display:block;}
</style>


